<template>
  <div>
    <a-card>
      <a-table
        ref="table"
        bordered
        :loading="loading"
        :columns="columns"
        :dataSource="dataSource"
        rowKey="id"
        :pagination="pagination"
        @change="handleTableChange"
      >
        <template slot="status" slot-scope="text,record,index">
          <div>{{record.orderStatus==0?'有待沟通':record.orderStatus==1?'新增':record.orderStatus==2?'沟通中':'成功'}}</div>
        </template>
        <template slot="action" slot-scope="text,record,index">
          <div>
            <a-button
              type="primary"
              icon="search"
              style="margin-right:10px;"
              @click="handleDetail(record)"
            >查看详情</a-button>
            <a-popconfirm
              placement="top"
              :title="confirm_title"
              @confirm="confirm(record)"
              okText="Yes"
              cancelText="No"
            >
              <a-button type="danger" icon="delete">删除</a-button>
            </a-popconfirm>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-modal
      :title="modal_title"
      :visible="modal_visible"
      :confirmLoading="loading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-spin :spinning="spinning">
        <a-row>
          <a-col
            :span="12"
            style="width:50%;display:flex;margin-bottom:10px;"
            v-for="(item,index) in order_goods_arr"
            :key="index"
          >
            <div style="width:60px;height:60px">
              <img style="width:100%;height:100%" :src="item.goodsImg" alt />
            </div>
            <div style="margin-left:10px;">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{item.goodsName}}</span>
                </template>
                <div style="width:150px" class="yihang">{{item.goodsName}}</div>
              </a-tooltip>
              <div>数量：{{item.goodsNum}}</div>
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{item.remark}}</span>
                </template>
                <div style="width:150px" class="yihang">备注：{{item.remark}}</div>
              </a-tooltip>
            </div>
          </a-col>
        </a-row>
      </a-spin>
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="ID" style="display:none">
          <a-input v-decorator="['id']" placeholder="ID" :disabled="true" style="display:none" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="询价状态">
          <a-select
            v-decorator="['orderStatus',{rules:[{required:true,message:'询价状态'}]}]"
            placeholder="询价状态"
          >
            <a-select-option
              v-for="(item,index) in orderStatus_arr"
              :key="index"
              :value="item.value"
            >{{item.label}}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { postAction, baseUrl } from '@/api/manage.js'

export default {
  data() {
    return {
      loading: false,
      pagination: {
        total: 0,
        pageSize: 10,
        current: 1,
        showTotal: total => `共有 ${total} 条数据` //分页中显示总的数据
      },
      columns: [
        { title: '联系人', align: 'center', dataIndex: 'name' },
        { title: '固定电话', align: 'center', dataIndex: 'tel' },
        { title: '联系手机', align: 'center', dataIndex: 'phone' },
        { title: '送货地址', align: 'center', dataIndex: 'address' },
        { title: '电子邮箱', align: 'center', dataIndex: 'email' },
        { title: '创建时间', align: 'center', dataIndex: 'createTime' },
        { title: '状态', align: 'center', scopedSlots: { customRender: 'status' } },
        { title: '备注', align: 'center', width: 200, dataIndex: 'remark' },
        { title: '操作', align: 'center', scopedSlots: { customRender: 'action' } }
      ],
      dataSource: [],
      confirm_title: '确定要删除此类型?',
      modal_title: '',
      modal_visible: false,
      spinning: false,
      order_goods_arr: [],
      form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
      labelCol: {
        lg: {
          span: 7
        },
        sm: {
          span: 7
        }
      },
      wrapperCol: {
        lg: {
          span: 10
        },
        sm: {
          span: 17
        }
      },
      orderStatus_arr: [
        { value: 0, label: '有待沟通' },
        { value: 1, label: '新增' },
        { value: 2, label: '沟通中' },
        { value: 3, label: '成功' }
      ],
      detail_info: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      postAction('/order/orderall', {
        page: this.pagination.current,
        size: this.pagination.pageSize
      }).then(res => {
        //   console.log(res)
        this.loading = false
        this.dataSource = res.data
        const pagination = { ...this.pagination }
        pagination.total = res.total
        this.pagination = pagination
      })
    },
    handleTableChange(pagination) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.getData()
    },
    confirm(item) {
      this.loading = true
      postAction('/order/deleteorder', {
        id: item.id
      }).then(res => {
        this.loading = false
        if (this.dataSource.length == 1) {
          this.pagination.current--
        }
        if (this.pagination.current == 1) {
          this.pagination.current = 1
        }
        this.getData()
      })
    },
    handleCancel() {
      this.form.resetFields()
      this.modal_visible = false
    },
    handleOk() {
      this.loading = true
      postAction('/order/orderupdate', this.form.getFieldsValue()).then(res => {
        // console.log(res)
        this.loading = false
        this.form.resetFields()
        this.modal_visible = false
        this.$message.info(res.msg)
        this.getData()
      })
    },
    handleDetail(item) {
      //   console.log(item)
      this.modal_title = '查看内容'
      this.modal_visible = true
      this.spinning = true
      postAction('/order/orderdetail', {
        id: item.id
      }).then(res => {
        // console.log(res)
        this.spinning = false
        this.order_goods_arr = res.data.orders
        this.detail_info = res.data.info
        this.form.setFieldsValue({
          id: this.detail_info.id,
          orderStatus: this.detail_info.orderStatus
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.yihang {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}
</style>